<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MouseMoveShadow</title>
    <style>
        html {
            color: black;
        }

        body {
            margin: 0;
        }

        .hero {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: black;
        }

        h1 {
            text-shadow: 10px 10px 0 rgba(0, 0, 0, 1);
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div class="hero">
        <h1 contenteditable>🔥WOAH!</h1>
    </div>
    <script>
        const hero = document.querySelector('.hero')
        const text = hero.querySelector('h1')
        const walk = 500

        function shadow(e) {
            const {
                offsetWidth: width,
                offsetHeight: height
            } = hero
            let {
                offsetX: x,
                offsetY: y
            } = e

            x = x + e.target.offsetLeft
            y = y + e.target.offsetTop

            const xWalk = Math.round((x / width * walk) - (walk / 2))
            const yWalk = Math.round((y / height * walk) - (walk / 2))

            text.style.textShadow = `
      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
    `
        }

        hero.addEventListener('mousemove', shadow)
    </script>
</body>

</html>